<template>
	<view>
	<div class="newsK">
		<div class="her">
			<u-avatar :src="src"></u-avatar>
			<p>大概什么时候送过来</p>
		</div class="me">
		<div class="me">
			<p>我明天中午有空给你送过去</p>
			<u-avatar :src="src1"></u-avatar>
		</div>
		<div <div class="her">
			<u-avatar :src="src"></u-avatar>
			<p>可以,不着急,有事下午说也可以。</p>
		</div>
		<div class="me">
			<p>好的到时候联系你</p>
			<u-avatar :src="src1"></u-avatar>
		</div>
		<div <div class="her">
			<u-avatar :src="src"></u-avatar>
			<p>好的</p>
		</div>
		<div class="me" v-for="item,index in list" :key="index">
			<p>{{item}}</p>
			<u-avatar :src="src1"></u-avatar>
		</div>
		<!-- <div class="me">
			<p>您好？</p>
			<u-avatar :src="src1"></u-avatar>
		</div>
		<div class="me">
			<p>不在了爷回去了嗷</p>
			<u-avatar :src="src1"></u-avatar>
		</div>
		<div class="me">
			<p>🐎🐎🐎</p>
			<u-avatar :src="src1"></u-avatar>
		</div>
		<div class="me">
			<p>🐉🐉🐉</p>
			<u-avatar :src="src1"></u-avatar>
		</div> -->
	</div>
	</div>
	<div class="ipt" :fixed="true">
		<u-icon name="mic" size="30"></u-icon>
		<u--input
			class="ipnt"
		    border="surround"
			color="black"
			v-model="value"
		  ></u--input>
		  <u-icon name="photo" size="30"></u-icon>
		  <u-icon name="plus-circle" size="30" @click='to'></u-icon>
	</div>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list:[
					'我明天中午有空给你送过去',
					'我明天中午有空给你送过去',
					'我是三水',
					'我明天中午有空给你送过去',
				],
				value:"",
				src: '/static/image/tabBar/tx1.jpg',
				src1: '/static/image/tabBar/Hong.png'
			}
		},
		methods:{
			to(){
				console.log(this.value)	
				this.list.push(this.value)
				console.log(this.list)
				this.value= ''
				uni.setStorageSync('msg', this.list);
			}
		},
		onLoad() {
				this.list=uni.getStorageSync('msg');
		}
	}
</script>
<style>
	page{
		/* background-color: aquamarine; */
	}
	.ipt{
		background-color:gainsboro;
		display: flex;
		justify-content: center;
	    width: 100%;
		padding-bottom:2rem;
		padding-top:0.5rem;
		position:sticky;
		bottom:0;
	}
	.ipnt{
		background-color: white;
		width:60%;
	}
	.newsK{
		padding-left:0.9rem;
		padding-right:0.9rem;
	}
	.her{
		display: flex;
		justify-content: start;
		align-items: center;
	}
	.her>p{
		padding:0.5rem;
		box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
		border-radius: 10px;
		margin-left:0.5rem;
	}
	.me{
		display: flex;
		justify-content: end;
		align-items: center;
		margin-top:2rem;
		margin-bottom:2rem;
	}
	.me>p{
		background-color:darkturquoise;
		padding:0.5rem;
		border-radius: 10px;
		margin-left:0.5rem;
	}
</style>